<template>
  <div class="account-settings">
    <h1>账户设置</h1>
    <v-form v-model="valid">
      <v-container>
        <v-row>
          <v-col
            cols="12"
          >
            <v-text-field
              v-model="account.previousPassword"
              :counter="10"
              :rules="rules.previousPassword"
              label="Previous password"
              required
            ></v-text-field>
          </v-col>

          <v-col
            cols="12"
          >
            <v-text-field
              v-model="account.password"
              :counter="10"
              :rules="rules.password"
              label="New password"
              required
            ></v-text-field>
          </v-col>

          <v-col
            cols="12"
          >
            <v-text-field
              v-model="account.confirmPassword"
              :rules="rules.confirmPassword"
              label="Confirm new password"
              required
            ></v-text-field>
          </v-col>
        </v-row>
        <!-- 保存按钮 -->
        <v-row>
          <v-col cols="12" class="d-flex justify-center">
            <div class="btn">
              <v-btn color="#f26c1c" :disabled="!valid" @click="onSubmit">提交修改</v-btn>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </div>
</template>

<script setup lang="ts">
const valid = ref(false)
const account = shallowReactive({
  previousPassword: '',
  password: '',
  confirmPassword: '',
})

const pwdRules = [
  (v: string) => v.trim().length >= 6 || '密码长度不能小于6位',
  (v: string) => v.trim().length <= 14 || '密码长度不能大于14位',
  (v: string) => /[a-zA-Z]/.test(v.trim()) || '密码必须包含至少一个字母',
  (v: string) => /[0-9]/.test(v.trim()) || '密码必须包含至少一个数字',
  (v: string) => /[!@#$%^&*(),.?":{}|<>]/.test(v.trim()) || '密码必须包含至少一个特殊字符',
]
const rules = {
  previousPassword: [
    // !!双重取反,强制转换为布尔值 '' null undefined 0 false 都为false
    (v: string) => !!v.trim() || '请输入上一次密码',
    ...pwdRules,
  ],
  password: [
    (v: string) => !!v.trim() || '请输入新密码',
    (v: string) => v.trim() !== account.previousPassword.trim() || '新密码不能与上一次密码相同',
    ...pwdRules,
  ],
  confirmPassword: [
    (v: string) => !!v.trim() || '请确认新密码',
    (v: string) => v.trim() === account.password.trim() || '确认密码与新密码不匹配',
    ...pwdRules,
  ],
}

// 泰囧提交修改
const onSubmit = async () => {
  if (!valid.value) {
    return
  }
  // 提交修改逻辑

  // 旧密码是否正确

  // 提交新密码
  // ...
}
</script>

<style scoped>
.account-settings {
  padding: 16px;
}
</style>